<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            margin-top: 100px;
            width: 170px;
            height: 36px;
            background: rgb(167, 80, 80);
            border: none;
        }

        .opt {
            opacity: .5;
        }
    </style>
</head>
<body>
    <div id="app">
       <input v-model="val" type="text">
       <span @click="del" v-show="flag">X</span>


       <div>
            <button :disabled="dis" @click="sub" :class="{
                btn: true,
                opt: dis
            }">提交</button>
       </div>
    </div>

    <script src="./vue.min.js"></script>
    <script>
         new Vue({
            el: "#app",
            data: {
                val: "",
                flag: false,
                dis: true
            },
            watch: {
                val(newValue) {
                    if (newValue.length > 0) {
                        this.flag = true
                        if (newValue.length === 11) {
                            this.dis = false
                        } else {
                            this.dis = true
                        }
                    } else {
                        this.flag = false
                    }
                }
            },
            methods: {
                del() {
                    this.val = ""
                },
                sub() {
                    console.log('提交')
                }
            }
        })
    </script>
</body>
</html>